<template>
  <div id="equitment">
    <chartTemplateVue :ref="refid" :chartoption="option">
      <!-- <template slot="control">
        <div>
          <h1>{{tempObj.name}}</h1>
        </div>
      </template> -->
    </chartTemplateVue>
  </div>
</template>

<script>
import chartTemplateVue from './BaseChart'
import axios from 'axios'
export default {
  name: 'saledata',
  
  props: {
    tempObj: {
      type: Object,
      default() {
        return {
          name: 'tb_name',
          xName: ['dim1', 'dim2'],
          dtpye: 'line',
          rows: ['2011年', '2012年', '2013年', '2014年', '2015年', '2016年', '2017年', '2018年', '2019年'],
          datasource: [
            [1853.3, 1930.4, 2196.1, 2348.8, 2456.3, 2793.8, 2894.5, 2803.9, 2575.4],
            [1853.3, 1930.4, 2345.1, 2348.8, 234.3, 2793.8, 2894.5, 2803.9, 2575.4]
          ]
        }
      }
    }
  },
  data() {
    let refid=this.randstr(6)
    console.log('common refid', refid)
    return {
      refid:refid,
      option: {
        title: { text: '年销量' },
        legend: {
          borderRadius: [5, 5, 0, 0],
          data: []
        },
        dataset: {
            source: []
          },
        dataZoom: [
          {},
          {
            type: 'slider',
            yAxisIndex: [0]
          }
        ],
        yAxis: {},
        xAxis: {},

        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        position: [0, 0],
        inside: [0, 0],
        height: '50%',
        width: '70%',
        series: [
          {
            name: '年销量',
            type: 'line',
            color: '#adf',
            decode: {
              x: 0,
              y: 1
            },
            barMaxWidth: 23
          }
        ]
      }
    }
  },
  components: {
    chartTemplateVue
  },
  methods: {
    change() {
      this.getdata()
    },
    getdata() {},
    changebyUrl(url) {
      this.arrchange(this.year)
      axios.get(url).then(res => {
        console.log(res.data)
      })
    },
    arrchange(obj) {
      console.log('genline(obj)',obj.dtpye)
      if(obj.dtpye == 'line'||obj.dtpye=='bar'){
        console.log('genline(obj)')
        this.genline(obj)
      }else if (obj.dtpye == 'pie'){
        console.log('genbar(obj)')
        this.genpie(obj)
      }console.log('genline(obj)')
    },
    genline(obj){
      let lines = []
      let option = {}
      console.log('obj', obj)
      this.option.series.splice(0, this.option.series.length)
      this.option.legend.data.splice(0, this.option.legend.data.length)
      for (let i = 0; i < obj.xName.length; i++) {
        let temp={
          type: obj.dtpye,
          name: obj.xName[i],
          data: obj.datasource[i],
          smooth: true
        }
        this.option.legend.data.push({
          name: obj.xName[i]
        })
        this.option.series.push(temp)
      }

      this.option.title.text = obj.name
      this.option.xAxis.type = 'category'
      this.option.xAxis.data = obj.rows
      this.$refs[this.refid].doOption(this.option)
    },
    genpie(obj){
      let lines = []
      let option = {}
      console.log('obj', obj)
      this.option.series.splice(0, this.option.series.length)
      this.option.legend.data.splice(0, this.option.legend.data.length)
      this.option.series.push({
        type: 'pie',
        data: obj.datasource,
      })

      this.option.title.text = obj.name
      // this.option.xAxis.type = 'category'
      // this.option.xAxis.data = obj.rows
      this.$refs[this.refid].doOption(this.option)
    },
    getdatamonth() {
      this.arrchange(this.tempObj)
      // axios.get('/sale/data/month').then(res => {
      //   this.arrchange(res.data)
      // })
    }
  },
  mounted() {
    let that = this
    that.arrchange(that.tempObj)
  },
  created() {
    let that = this
    that.arrchange(that.tempObj)
  }
}
</script>

<style scoped>
#equitment {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%;
  height: 100%;
}
#equipument_charts {
  width: 100%;
  height: 100%;
  /* background: #2c3e50; */
}
</style>